<template>
  <div class="box8">
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
//获取DOM节点
let charts = ref()
import { usetravelStore } from '../../../stores/travel'
let travelStore = usetravelStore()

// 获取当前年份
const currentYear = new Date().getFullYear()

// 初始化空数组
const years:any = []

const findValueByName = (name: string) => {
  // 确保 traveldata 和 alldata 都存在且 alldata 是可迭代的
  if (travelStore.traveldata && Array.isArray(travelStore.traveldata.alldata)) {
    for (const item of travelStore.traveldata.alldata) {
      // 处理 item
      if (item.name === name) {
      return item.value.splice(0, 5).reverse()
    }
    }
  }
  return null // 如果没有找到，返回 null 或其他默认值
}

onMounted(() => {
  // 循环过去十年（不包含本年）
  for (let i = 1; i <= 5; i++) {
    const pastYear = currentYear - i
    years.push({
      value: String(pastYear) + '年',

      // 突出周一
      textStyle: {
        color: 'eee'
      }
    })
  }
  years.reverse()
  setTimeout(() => {
    initmap()
  }, 500)
})
const initmap = () => {
  //一个容器可以同时展示多种类型的图形图标
  let mychart = echarts.init(charts.value)
  let option = {
    title: {
      text: '近五年全国旅游数据表',
      textStyle: {
        color: '#eee'
      }
    },
    grid: {
      left: '0%',
      right: '5%',
      top: '22%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#eee'
        }
      }
    },
    dataZoom: [
      {
        type: 'inside', //slider表示有滑动块的，
        show: true,
        xAxisIndex: [0], //表示x轴折叠
        start: 1, //数据窗口范围的起始百分比,表示1%
        end: 100, //数据窗口范围的结束百分比,表示35%坐标
        // zoomOnMouseWheel:true,
        moveOnMouseMove: true
      }
    ],
    legend: {
      data: ['国内游客(万人次)', '国内旅游总花费(亿元)'],
      textStyle: {
        color: '#eee'
      },
      right: '0%',
      width: '20%',

    },
    xAxis: [
      {
        type: 'category',
        data: years,
        axisPointer: {
          type: 'shadow'
        },
        axisTick: {
          lineStyle: {
            color: '#eee'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#eee' // x轴标签文字颜色设置为黑色  
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '国内游客(万人次)',
        axisLabel: {
          formatter: '{value}万人次',
          textStyle: {
            color: '#eee' // x轴标签文字颜色设置为黑色  
          },
        },
        nameTextStyle: {
          color: '#eee'
        },

      },
      {
        type: 'value',
        name: '国内旅游总花费(亿元)',
        axisLabel: {
          formatter: '{value}亿元',
          textStyle: {
            color: '#eee' // x轴标签文字颜色设置为黑色  
          },
        },
        nameTextStyle: {
          color: '#eee'
        }
      }
    ],
    series: [
      {
        name: '国内游客(万人次)',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value:number) {
            return (value) + '万人次'
          }
        },
        itemStyle: {
          color: '#fec574'
        },
        data: findValueByName('国内游客(万人次)')
      },

      {
        name: '国内旅游总花费(亿元)',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value:number) {
            return (value as number) + '亿元'
          }
        },
        data: findValueByName('国内旅游总花费(亿元)')
      }
    ]
  }

  //设置配置项
  mychart.setOption(option)
}
//组件挂载完毕
onMounted(() => { })
</script>

<style scoped>
.charts {
  color: #eee !important;
  height: 380px;
}
</style>
